<script lang="ts" setup>
import { computed, ref, Ref } from 'vue'
import PreviceIcon from '@/assets/logo.png'
import { useThemeStroe, pinia } from '@stores'
import { THEMEMAP } from '@/config'

const visable :Ref<boolean> = ref(false)
const showThemeDialog = () => {
  visable.value = true
}

interface ThemeItem {
  label: string,
  key: keyof typeof THEMEMAP,
  icon: string
}

// 主题风格
const themeList :Ref<ThemeItem[]> = ref([
  {
    label: '黑白调',
    key: 'light' as keyof typeof THEMEMAP,
    icon: PreviceIcon
  },
  {
    label: '暗夜',
    key: 'dark' as keyof typeof THEMEMAP,
    icon: PreviceIcon
  },
  {
    label: '落日余晖',
    key: 'fruit' as keyof typeof THEMEMAP,
    icon: PreviceIcon
  }
])

const themeStore = useThemeStroe(pinia)
const active = computed(() => themeStore.getTheme)
const hide = () => {
  visable.value = false
}
const changeTheme = (theme :ThemeItem) => {
  themeStore.changeTheme(theme.key)
}
</script>
<template>
  <div style="line-height: 30px;display: flex;align-items: center;margin-top: -2px">
    <el-icon size="24" @click="showThemeDialog">
      <Setting />
    </el-icon>
    <el-drawer v-model="visable" :show-close="false" size="500px">
      <template #header>
        <h2>主题设置</h2>
      </template>
      <template #default>
        <el-row class="row">
          <el-divider>
            主题风格
          </el-divider>
          <div class="content">
            <div style="display: flex;flex-wrap: wrap;flex-direction: flex-start;">
              <div
                class="theme-item"
                v-for="item in themeList"
                :key="item.key"
                @click="changeTheme(item)"
                :class="item.key === active ? 'active' : ''"
              >
                <div class="theme-img">
                  <img :src="item.icon" :alt="item.key" style="width: 50px; height: 50px;">
                </div>
                <div class="theme-name">
                  {{ item.label }}
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </template>
      <template #footer>
        <div style="flex: auto;text-align: center;">
          <el-button @click="hide">关闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<style scoped lang="scss">
:deep .el-drawer__header {
  border-bottom: 1px solid #cfcfcf;
}
.row {
  display: block;
  width: 100%;
  .content {
    margin-top: 10px;
    .theme-item {
      width: 152px;
      padding: 10px;
      text-align: center;
      border: 2px solid transparent;
      box-sizing: border-box; 
      &.active {
        border: 2px solid var(--el-app-theme-drawer-border);
        color: var(--el-app-theme-drawer-color);
        background: var(--el-app-theme-drawer-bg)
      }
    }

  }
}
</style>